<!-- 相册详情Header -->
<template>
  <div class="_header">
    <div class="_left">
      <img class="_img" :src="albumInfo.coverUrl" alt="" />
      <div class="_info">
        <div class="_line1">
          <span class="_name">{{ albumInfo.name }}</span>
          <span class="_num">{{ albumInfo.photoAlbumNum }}张/所有人可见</span>
        </div>
        <div class="_line2">
          <span class="_desc">相册描述：{{ albumInfo.desc }}</span>
          <a v-has="'content:album:edit'" type="primary" @click="handleEdit">编辑</a>
        </div>
        <div class="_line3">
          <a-button v-has="'content:album:edit'" class="_upload" type="priamry" @click="handleUploadPhoto">上传相片</a-button>
          <a-button v-has="'content:album:remove'" class="_batch" type="primary" @click="handleSetIsPhotoBatchDel"
            >批量{{ isPhotoBatchDel ? '删除' : '管理' }}</a-button
          >
          <a-button v-if="isPhotoBatchDel" class="_batch" type="primary" @click="handleReset">重置</a-button>
        </div>
      </div>
    </div>
    <div class="_right">
      <div class="_kv">
        <span class="_k">浏览</span>
        <span class="_v">{{ albumInfo.browseNum }}</span>
      </div>
      <!-- <div class="_kv">
                <span class="_k">评论</span>
                <span class="_v">5</span>
            </div> -->
      <div class="_kv">
        <span class="_k">点赞</span>
        <span class="_v">{{ albumInfo.likeNum }}</span>
      </div>
    </div>
    <CreateAlbum ref="createAlbum" />
    <UploadPhoto ref="uploadPhoto" />
  </div>
</template>

<script>
import CreateAlbum from '../../components/modal/createAlbum.vue'
import UploadPhoto from './uploadPhoto.vue'
import { mapGetters, mapActions, mapMutations } from 'vuex'
import { delPhoto } from '@/api/content/operate'
export default {
  components: {
    CreateAlbum,
    UploadPhoto,
  },
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['albumInfo', 'isPhotoBatchDel', 'photoDelIds', 'photoList', 'photoCurrent']),
  },
  watch: {},
  methods: {
    ...mapActions(['SetIsPhotoBatchDel', 'GetPhoto', 'GetPhotoAlbumDetail', 'SetPhotoDelIds']),
    ...mapMutations(['SET_PHOTOCURRENT']),
    handleEdit() {
      let obj = {
        type: 'edit',
        title: '编辑相册',
        data: JSON.parse(JSON.stringify(this.albumInfo)),
      }
      this.$refs.createAlbum.show(obj)
    },
    handleUploadPhoto() {
      this.$refs.uploadPhoto.show()
    },
    async handleSetIsPhotoBatchDel() {
      if (this.isPhotoBatchDel) {
        console.log('photoDelIds--->', this.photoDelIds)
        if (!this.photoDelIds.length) return this.$message.error('请选择需要删除的照片')
        let { code, msg } = await delPhoto(this.photoDelIds)
        this.$message[code === 0 ? 'success' : 'error'](msg)
        if (code === 0) {
          if (this.photoDelIds.length === this.photoList.length && this.photoCurrent > 1) {
            this.SET_PHOTOCURRENT(this.photoCurrent - 1)
          }
          this.GetPhoto()
          this.GetPhotoAlbumDetail()
          this.SetPhotoDelIds([])
        }
      }
      this.SetIsPhotoBatchDel(!this.isPhotoBatchDel)
    },
    handleReset() {
      this.SetIsPhotoBatchDel(false)
      this.SetPhotoDelIds([])
    },
  },
  created() {},
  mounted() {},
}
</script>
<style scoped lang="less">
._header {
  display: flex;
  justify-content: space-between;
  align-content: center;
  ._left {
    display: flex;
    ._img {
      width: 125px;
      height: 100px;
      border-radius: 4px;
    }
    ._info {
      margin-left: 10px;
      ._line1 {
        margin-top: 5px;
        ._name {
          font-size: 16px;
          font-weight: bold;
        }
        ._num {
          font-size: 14px;
          margin-left: 20px;
        }
      }
      ._line2 {
        margin-top: 10px;
        ._desc {
          font-size: 14px;
        }
        a {
          font-size: 14px;
          margin-left: 20px;
        }
      }
      ._line3 {
        margin-top: 10px;
        ._batch {
          margin-left: 10px;
        }
      }
    }
  }
  ._right {
    display: flex;
    ._kv {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 16px;
      font-weight: bold;
      margin-right: 20px;
      ._v {
        margin-top: 10px;
      }
    }
  }
}
</style>